<script>
import _ from 'lodash'
import { directive } from 'babel-types'

export default {
  name: 'mmbsDetail',
  render(h) {
    return (
      <yt-page title="详情页" scroll>
        {this.renderCell(h)}
      </yt-page>
    )
  },
  props: {
    item: {},
    columns: [
      {
        label: '',
        field: '',
        hide: [],
        base: 'cell', // 
        belongTo: '' //
      }
    ]
  },
  methods: {
    renderCell(h) {
      let columnsObj = _.groupBy(this.columns, 'belongTo')
      let cards = []

      _.forIn(columnsObj, (card, key) => {
        let cells = card.map(cell => {

          if (cell.hide && cell.hide.indexOf('detail') !== -1) return
          if (cell.base === 'cell') {
            return <yt-cell label={cell.label} value={this.item[cell.field]} />
          }
          if (cell.base === 'textarea') {
            // todo 如何实现 v-model 绑定？
            return h('yt-textarea', {
              domProps: {
                value: self.value
              },
              on: {
                
              }
            })
            // return <yt-textarea disabled title={cell.label} v-model={this.item[cell.field]}></yt-textarea>
          }
        })

        cards.push(<yt-card title={key}>{cells}</yt-card>)
      })
      return cards
    }
  }
}
</script>
